<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <title>项目申请管理</title>
  <!--  <th:block th:replace="/backstage/common_resources::common_css"/>-->
  <!--  <th:block th:replace="/backstage/common_resources::common_js"/>-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="/frontdesk/css/common.css">
  <link rel="stylesheet" href="/frontdesk/css/search.css">
  <script src="/frontdesk/js/jquery-3.3.1.js"></script>
  <!--    分页插件-->
  <script src="/frontdesk/js/bootstrap-paginator.js"></script>
  <style>
    #dataList {
      /* 居中显示 */
      margin: 0 auto;
      width: 1200px;
      font-size: 16px;
      line-height: 30px;
      margin-bottom: 100px;
    }

    .box-footer {
      /* 居中 */
      margin: 0 auto;
      width: 1200px;
    }
  </style>
</head>

<body class="hold-transition skin-purple sidebar-mini">
  <div class="wrapper">
    <!-- 页面头部 -->
    <header th:replace="~{/frontdesk/header::header}"></header>
    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 内容头部 -->
      <section class="content-header" style="width: 1200px;margin: 0 auto;">
        <p style="text-align: center; 
          background-color: rgb(75, 128, 128);
          height: 40px;
          margin:10px 0 10px 0;
          color: white;
          line-height: 40px;
          font-size: 18px;
          border-radius: 10px;
          font-weight: bold;">
          申请列表
        </p>

      </section>
      <!-- 内容头部 /-->
      <!-- 正文区域 -->

      <table id="dataList" class="table-bordered table-striped table-hover dataTable">
        <thead>
          <tr>
            <th></th>
            <th>项目标题</th>
            <th>项目申请人</th>
            <th>项目内容</th>
            <th>审核情况</th>
          </tr>
        </thead>
        <tbody>
          <tr th:each="project:${projectPage.records}">
            <td><input name="ids" type="checkbox" value="${project.pid}"></td>
            <td th:text="${project.projectName }"></td>
            <td th:text="${project.applicant }"></td>
            <td th:utext="${project.projectDesc }"></td>
            <td class="text-center">

              <div th:if="${project.status}==true">
                <a class="btn bg-blue btn-xs">通过</a>
              </div>

              <div th:if="${project.status}==false">
                <a class="btn bg-red btn-xs">待审核</a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="box-footer">
        <div class="box-tools pull-right">
          <div class="form-group form-inline">
            总共<span th:text="${projectPage.pages}"></span>页，共<span th:text="${projectPage.total}"></span>条数据。
          </div>
          <ul class="pagination"></ul>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <footer th:replace="~{/frontdesk/footer::footer}"></footer>
  </div>


  <!-- 在js中获取Model的值 -->
  <script th:inline="javascript">
    $(function () {
      var currentPage = [[${projectPage.current}]]; // 当前页
      var pages = [[${projectPage.pages}]]; // 总页数


      // 分页插件
      $('.pagination').bootstrapPaginator({
        bootstrapMajorVersion: 3, // bootstrap版本
        currentPage: currentPage, // 当前页
        totalPages: pages, // 总页数
        numberOfPages: 5, // 最多显示多少页
        itemTexts: function (type, page, current) {
          switch (type) {
            case "first":
              return "首页";
            case "prev":
              return "上一页";
            case "next":
              return "下一页";
            case "last":
              return "末页";
            case "page":
              return page;
          }
        },
        onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法
          location.href = "/frontdesk/project/projectList?page="+page;
        }
      });
    })

    // 获取所有的li元素
    const navItems = document.querySelectorAll('.nav li');

    // 移除其他li元素的active类名
    navItems.forEach(li => {
      li.classList.remove('nav-active');
    });
  </script>
</body>

</html>